DOM是document object model的縮寫，基本上是HTML檔的結構化表示，DOM讓JavaScript可以透過HTML的元素（element）及樣式（style）來操作它們，像是更改text、HTML屬性（attributes）及CSS樣式，換句話說，DOM就像是HTML檔和JavaScript程式碼之間的連接點。

一旦載入HTML頁面，瀏覽器就會自動創建DOM，它會被儲存在像是族譜般的一個樹狀結構中，也就是所謂的DOM tree，在這個樹狀結構中，每個HTML元素都是一個物件，它們都有一個元素節點（node）和DOM tree，我們可以使用JavaScript訪問這些節點以及和它們互動，而當我們操作DOM時也會使用到parent elements、child elements、sibling elements等術語。

DOM總是從document物件開始，它會在樹狀結構的最上層，document物件是一個特殊的物件，像是我們使用document.querySelector()來選擇元素，這意味著document物件有querySelector這個方法，讓我們可以透過這個方法來選擇元素，因此也可以說document這個物件擔任著DOM的入口點。

document的第一個child element通常是HTML元素，因為它通常是所有HTML檔的根元素，再來，HTML通常有兩個子元素：head和body，在HTML中，這兩個元素是相鄰的元素，因此他們在DOM中屬於sibling elements，然後順著HTML的結構，我們會有更多更多在head和body之中的child elements加入到DOM tree裡，DOM tree當中不只有元素節點，也有所有text本身、註釋及其他東西的節點，因為基本上，在HTML檔中的任何內容都必須在DOM裡面，所以我們可以藉此操作它們。

值得一提的是，許多人以為DOM以及可以用來操作DOM的所有方法和屬性（property），像是document.querySelector()是JavaScript的一部分，但其實不然，DOM以及DOM methods其實是web API（Application Programming Interface）的一部分，它就像瀏覽器執行的文庫（library），也是由JavaScript撰寫而成，並且可以自動供我們使用，我們可以通過JavaScript程式碼訪問這些library，除了DOM之外，web API還有許多種類，像是timer、fetch API等等。